<template>
    <div style="display: flex;align-items: center;">
        <el-form :inline="true" label-position="top">
            <el-form-item>
                <el-cascader
                    v-model="searchConditions.region"
                    placeholder="选择地区"
                    :options="regions"
                />
            </el-form-item>

            <el-form-item>
                <el-date-picker
                    v-model="searchConditions.date_range"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="起始日期"
                    end-placeholder="终止日期"
                    :disabled-date="disabledDate"
                    @change="validEndDate"
                />
            </el-form-item>

            <el-form-item>
                <el-popover placement="bottom" :width="200" trigger="click">
                    <template #reference>
                        <el-button style="margin-right: 16px;">人数和房间数量</el-button>
                    </template>
                    <el-form
                        label-position="right"
                        label-width="70px"
                        size="small"
                        v-for="(item, index) in ['成人', '未成年人', '房间数']"
                    >
                        <el-form-item :label="item">
                            <el-input-number
                                controls-position="right"
                                :min="1"
                                v-model="searchConditions.rooms[index]"
                            />
                        </el-form-item>
                    </el-form>
                </el-popover>
            </el-form-item>

            <el-form-item>
                <div style="display: inline-flex;align-items: center;">
                    <el-input placeholder="输入关键词" v-model="searchConditions.keywords" />
                    <el-button type="primary" :disabled="!can_submit" @click="submit">搜索</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ref, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const can_submit = ref(true)

const searchConditions = ref({
    region: [],
    date_range: [new Date(), new Date()],
    rooms: [1, 1, 1],
    keywords: ""
})

const regions = ref([
    {
        value: "中国",
        label: "中国",
        children: [
            {
                value: "成都市",
                label: "成都市"
            }
        ]
    }
])

const disabledDate = (day) => {
    return day.getTime() < Date.now()
}

const validEndDate = e => {
    let end = e[1].getTime()
    let latest = e[0].getTime() + 3600 * 1000 * 24 * 30
    if (end > latest) {
        ElMessage({
            showClose: true,
            message: "最多选择 30 天！",
            type: "error"
        })
        can_submit.value = false
    }
    else {
        can_submit.value = true
    }
}

const submit = () => {
    console.log(searchConditions.value)
    proxy.$emitter.emit("search", { a: 0, b: 2 });
}
</script>

<style scoped>
.el-form-item {
    margin: 0px;
}
</style>
